
<form class="register-from" nz-form [formGroup]="registerFrom" (ngSubmit)="submitRegister(registerFrom.value)">
  <nz-form-item>
    <div class="login-title">注册新账号</div>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzRequired nzFor="email">邮箱</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" nzHasFeedback nzErrorTip="The input is not valid E-mail!">
      <input nz-input formControlName="email" id="email" />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="password" nzRequired>密码</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" nzHasFeedback nzErrorTip="Please input your password!">
      <input
        nz-input
        type="password"
        id="password"
        formControlName="password"
        (ngModelChange)="updateConfirmValidator()"
      />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="checkPassword" nzRequired>确认密码</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" nzHasFeedback nzErrorTip="两次密码输入不一致">
      <input nz-input type="password" formControlName="checkPassword" id="checkPassword" />
      <ng-template #errorTpl let-control>
        <ng-container *ngIf="control.hasError('required')">
          Please confirm your password!
        </ng-container>
        <ng-container *ngIf="control.hasError('confirm')">
          Two passwords that you enter is inconsistent!
        </ng-container>
      </ng-template>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="nickname" nzRequired>用户名</nz-form-label>
    <nz-form-control [nzSm]="14" [nzXs]="24" nzHasFeedback nzErrorTip="Please input your nickname!">
      <input nz-input id="nickname" formControlName="nickname" />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="phoneNumber" nzRequired>手机号码</nz-form-label>
    <nz-form-control
      [nzSm]="14"
      [nzXs]="24"
      [nzValidateStatus]="registerFrom.controls['phoneNumber']"
      nzHasFeedback
      nzErrorTip="Please input your phone number!">
      <input formControlName="phoneNumber" id="'phoneNumber'" nz-input />
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-label [nzSm]="6" [nzXs]="24" nzFor="captcha" nzRequired>验证码</nz-form-label>
    <nz-form-control
      [nzSm]="14"
      [nzXs]="24"
      nzErrorTip="Please input the captcha you got!"
      nzExtra="We must make sure that your are a human.">
      <div nz-row [nzGutter]="8">
        <div nz-col [nzSpan]="16">
          <input nz-input formControlName="captcha" id="captcha" />
        </div>
        <div nz-col [nzSpan]="8">
          <button nz-button (click)="getCaptcha($event)">验证码</button>
        </div>
      </div>
    </nz-form-control>
  </nz-form-item>
  <nz-form-item>
    <nz-form-control>
      <div nz-row style="text-align: center;">
        <div nz-col [nzSpan]="24">
          <button nz-button class="login-form-button" [disabled]="!registerFrom?.valid" [nzType]="'primary'">注 册</button>
        </div>
      </div>
      <div style="width: 83%;margin: 0 auto;">
        <a (click)="toLogin()">去登录</a>
      </div>
    </nz-form-control>
  </nz-form-item>

</form>
